/**
* 业务员-广告-设备管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>播放记录管理管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.key" placeholder="请输入广告名称"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <span class="demonstration">选择时间</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">导出</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" @selection-change="selectChange" :data="dataForm" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column align="center" sortable prop="apId" label="ID" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="user.auCompany" label="客户商" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="advertisement.adName" label="广告名" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="apStart" label="广告开始播放时间" width="120" >
      </el-table-column>
      <el-table-column align="center" sortable prop="apEnd" label="广告结束播放时间" width="120">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
// 导入请求方法

import Pagination from '../../components/Pagination'
import {handleExport, postJSON} from "../../api/axiosFun";
export default {
  data() {
    return {
      value1: [],
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      parking:[],//下拉框数据
      dataForm: [],
      // 编辑与添加
      editData: {
        eId: '',
        eIshot: '',
        eMaxCount: '',
        plId: '',
        token: localStorage.getItem('logintoken')
      },

      // 选择数据
      selectdata: [],
      // rules表单验证
      rules: {

      },

      // 请求数据参数
      formInline: {
        page: 1,
        limit: 10,
        key: '',
        startDate:'',
        endDate:''
      },

      // 选中
      checkmenu: [],

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据方法
    getdata(parameter) {
      this.loading = true

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      postJSON("/api/ap/page",parameter).then(res => {
        this.loading = false
        console.log(res)
        if (res.status != 200) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.dataForm = res.data.data.list
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page
          this.pageparm.pageSize = this.formInline.limit
          this.pageparm.total = res.data.data.total
        }
      })
    },
    //表格中修改时间格式
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc != null) {
        const dateMat = new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
        const year = dateMat.getFullYear();
        const month = dateMat.getMonth() + 1;
        const day = dateMat.getDate();
        const hh = dateMat.getHours();
        const mm = dateMat.getMinutes();
        const ss = dateMat.getSeconds();
        const timeFormat = year + "/" + month + "/" + day;
        return timeFormat;
      }
    },

    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    //搜索事件
    search() {
      console.log(this.value1)
      this.formInline.startDate=this.value1[0]
      this.formInline.endDate=this.value1[1]
      this.getdata(this.formInline)
    },
    handleEdit(){
      handleExport("/api/ap/out",this.formInline).then(res => {
        this.loading = false
        console.log(res)

          let blob = new Blob([res], {
            type: "application/msexcel;charset=utf-8",
          });
          let downloadElement = document.createElement('a');
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "设备播放记录.xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象

      })
    },


    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.unitparm.deptId = data.id
        this.unitparm.deptName = data.name
        //交叉点击节点
      } else {
      }
    },

    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val
    },


  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

